<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>触发式动画</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: #f00;
				/* transition-property:all;
				transition-duration: 2s;
				transition-timing-function: cubic-bezier(.07,-0.49,.69,-1.11);
				transition-delay: 2s; */
				transition: all 2s  linear;
			}
			
			input{
				display: none;
			}
			#ipt1:checked~div{
				margin-left: 0px;
			}
			#ipt2:checked~div{
				margin-left: 200px;
			}
			#ipt1:checked~.right label:nth-child(2){
				display: block;
			}
			label{
				width: 20px;
				height: 20px;
				background-color: #f00;
			}
		</style>
	</head>
	<body>
		
		<input type="radio" id="ipt1" name="sex" checked>
		<input type="radio" id="ipt2" name="sex">
		<input type="radio">
		<input type="radio">
		<input type="radio">
		<input type="radio">
		<div></div>
		
		
		
		<div class="right">
			<label for="ipt2">ipt2</label>
		</div>
		<!-- 
		 触发式动画 
		 transition
		 
		 -->
	</body>
</html>